<template>
	<section>
		<el-button  v-show = "isEdit || isDetail || isStudent"  @click="handleBack" style = "position:absolute;top:15px;margin-left:200px;"><i class = "fa fa-arrow-left"></i> 返回上级</el-button>
		<div v-show = "!isEdit && !isDetail">
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;background-color:#fff">
			  <el-form :inline="true" :model="filters">
			     <el-form-item label="选择创建时间范围:">
                            <el-date-picker
						      v-model="filters.time"
						      type="datetimerange"
						      range-separator="~"
						      start-placeholder="开始日期"
						      end-placeholder="结束日期">
			     </el-date-picker>
                </el-form-item>
				<el-form-item  label="关键字:">
					<el-input v-model="filters.KeyWord" placeholder="输入登录名或姓名查找"></el-input>
				</el-form-item>
				<!--  <el-form-item label="组别:">
                           <el-select v-model="filters.region" placeholder="所有组别">
                            <el-option label="组别1" value="shanghai"></el-option>
                            <el-option label="组别2" value="beijing"></el-option>
                          </el-select>
                 </el-form-item> -->
				<el-form-item>
					<el-button  v-on:click="getUsers">搜索</el-button>
				</el-form-item>
				<el-form-item>
					<el-button @click="getAllUser">全部</el-button>
				</el-form-item>
				 <el-button style = "float:right" type= "warning" @click="handleAdd">添加康复师</el-button>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :style = "conheight" :data="tableData" @row-click="openDetails"  highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;padding:15px;text-align:center;overflow-y:auto">
			<!-- <el-table-column type="selection" width="55">
			</el-table-column> -->
			<el-table-column prop="RowNum" label="序号" width="140" >
			</el-table-column>
			<el-table-column prop="Name" label="所属机构" width="140">
			</el-table-column>
			<el-table-column prop="LinkName" label="登录名" width="140">
			</el-table-column>
			<el-table-column prop="JoinTime" label="真实姓名" min-width="180" >
			</el-table-column>
			<el-table-column prop="ActiveTime" label="性别" min-width="180">
			</el-table-column>
			<el-table-column prop="EndTime" label="创建时间" min-width="180">
			</el-table-column>
			<el-table-column label="操作" width="260">
				<template slot-scope="scope">
					<el-button size="small"   @click.stop="handleEdit(scope.$index, scope.row)" class = "btnSty" >修改</el-button>
					<el-button size="small"  @click.stop="handleEdit(scope.$index, scope.row)" class = "btnSty">重置密码</el-button>
					<el-button  size="small"  @click.stop="handleDel(scope.$index, scope.row)" class = "delBtnSty"  style= "border-right:none">删除</el-button>
					<!-- <el-button  size="small"  @click.stop="handleDel(scope.$index, scope.row)" class = "delBtnSty">删除</el-button> -->
					<!-- <el-button  size="small"  v-show = "isStudent" @click.stop="handleStudentDel(scope.$index, scope.row)" class = "delBtnSty">删除</el-button> -->

				</template>
			</el-table-column>
		</el-table>
       
		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<div style = "position:absolute;">
         	<!-- <el-button @click="checkall" >全选</el-button>
			<el-button @click="exitAll" >取消全选</el-button> -->
			<!-- <download-excel :data = "tableData" name = "康复师.xls" style = "float:left;margin-right:10px;"><el-button>导出excel</el-button></download-excel> -->
			<!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button> -->
            </div>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="ps" :total="total" style="text-align:center;">
			</el-pagination>
		</el-col>
		   	<!--新增界面-->
		<el-dialog title="新增康复师"  v-model="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
			<el-form-item label="所属机构:" prop="organName">
					<el-input v-model="editForm.organName" auto-complete="off"></el-input>
				</el-form-item>
		     	<el-form-item label="登录名:" prop="loginName">
					<el-input v-model="editForm.loginName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="登录密码:" prop="password">
					<el-input v-model="editForm.password" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="真实姓名:" prop = "linkName">
					<el-input v-model="editForm.linkName"></el-input>
				</el-form-item>
				<el-form-item label="性别:" prop="email">
					 <el-radio v-model="radio" label="m">男</el-radio>
                     <el-radio v-model="radio" label="f">女</el-radio>
				</el-form-item>
				</el-form>
			<div slot="footer" class="dialog-footer" style = "text-align:center">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">确定</el-button>
			</div>
		</el-dialog>
		</div>
		<div v-show = "isEdit" :style = "conheightEdit" style = "overflow-y:auto;background:#fff;padding:20px;">
		     <el-form :model="editForm" label-width="120px" :rules="rules" ref="editForm">
		     	<el-form-item label="登录名:" prop="loginName">
					<el-input v-model="editForm.loginName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="真实姓名:" prop="realName">
					<el-input v-model="editForm.realName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="性别:">
					<el-radio-group v-model="editForm.Sex">
						<el-radio class="radio" label="m">男</el-radio>
						<el-radio class="radio" label="f">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="手机号:" prop="phone">
					<el-input v-model="editForm.phone" :min="0" :max="200"></el-input>
				</el-form-item>
				<el-form-item label="电子邮箱:" prop="email">
					<el-input  placeholder="请输入电子邮箱" v-model="editForm.email"></el-input>
				</el-form-item>
				<el-form-item label="QQ:" prop = "qq">
					<el-input v-model="editForm.qq"></el-input>
				</el-form-item>
				<el-form-item  label="">
					<el-button type = "warning"  v-show = "!isStudent"  @click.native="editSubmit"  :loading="editLoading">修改</el-button>
					<el-button type = "warning" v-show = "isStudent"  @click.native="editStudentSubmit"  :loading="editLoading">修改</el-button>
				</el-form-item>
			</el-form>
			
		</div>
		<div v-show = "isDetail" :style = "conheightEdit" style = "overflow-y:auto;background:#fff;padding:20px;">
			 <el-form :model="teacherEditMsgForm" label-width="120px" ref="teacherEditMsgForm" >
                <el-row>
                  <el-col :span = "12">
                     <el-form-item label="真实姓名：" prop="name">
                       <div class = "rightBox">{{teacherEditMsgForm.name}}</div>
                      </el-form-item>
                    </el-form-item>
                  </el-col>
                  <el-col :span = "12">
                      <el-form-item label="性别：" >
                      	 <div class = "rightBox">{{toSex(teacherEditMsgForm.sex)}}</div>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span = "12">
                     <el-form-item label="所在单位：">
                        <div class = "rightBox">{{teacherEditMsgForm.office}}</div>
                    </el-form-item>
                    </el-col>
                    <el-col :span = "12">
                          <el-form-item label="学历：">
                           <div class = "rightBox">{{teacherEditMsgForm.EducationBackground}}</div>
                         </el-form-item>
                    </el-col>
                  </el-row>
                   <el-row>
                      <el-col :span = "12">
                        <el-form-item label="出生日期：">
                        	<div class = "rightBox">{{teacherEditMsgForm.birth}}</div>
                        </el-form-item>
                      </el-col>
                     
                  </el-row>
              </el-form>
		</div>
	</section>
</template>

<script>
     import axios from 'axios';
     import { isPhone,isEmail,isPassword } from "@/common/js/validate"
	//import { getUserListPagefff } from '@/api';


	export default {
		data() {
			return {
				rules:{
		        phone:[{required: true,validator:isPhone,trigger: "blur"}],
		        loginName: [{ required: true, message: '登录名不能为空', trigger: 'blur' }],
				realName: [{ required: true, message: '真实姓名不能为空', trigger: 'blur' }],
				password:[ {required: true,validator:isPassword,trigger: "blur" }],
		        },
			  isloginNameNone:false,
			  isPassWordNone:false,
              isPasswordError:false,
              isPassWordDiff:false,
              isrealNameNone:false,
              isStudent:false,
			  conheight:{
                height:''
               },
               conheightEdit:{
                height:''
               },
				isEdit:false,
				tableData: [{'Name':'医院','LinkName':'张三','JoinTime':'2019/09/09 23:00','ActiveTime':'2019/09/09 23:00','EndTime':'2019/09/09 23:00','remark':'2019/09/09'}],
				filters: {
					KeyWord: '',
					region:'',
					time:''
				},
				editForm: {
					id: 0,
					loginName: '',
					realName:'',
					Sex: 'm',
					phone: '',
					email:'',
					qq: ''
				},
			   editLoading: false,
				users: [],
				total: 0,
				page: 1,
				ps:10,
				listLoading: false,
				sels: [],//列表选中列
				addLoading: false,
				addFormRules: {
					name: [
						{ required: true, message: '请输入登录名', trigger: 'blur' }
					]
				},
				addFormVisible:false,
				//新增界面数据
				addForm: {
					loginName: '',
					password: '',
					ispassword: '',
					realName: '',
					radio:'f'
				},
				isDetail:false,
				teacherEditMsgForm:{
		          id: 0,
		          sex:'',
		          birth:'',
		          office:'',
		          name:'',
		          EducationBackground: '',
		        },
			}
		}, 
		  created() {
	     window.addEventListener('resize', this.getHeight);
	        this.getHeight()
	    },
		methods: {
			myStudent(index, row){
				 this.listLoading = true;
				 this.isStudent = true;
				 let Start
                 let End
                 if(this.filters.time[0] == undefined){
                      Start = ''
                 }else{
                 	 Start =  new Date(this.filters.time[0]).format("yyyy-MM-dd hh:mm:ss")
                 }
                  if(this.filters.time[1] == undefined){
                      End = ''
                 }else{
                 	 End =  new Date(this.filters.time[1]).format("yyyy-MM-dd hh:mm:ss")
                 }
				 let obj = {StartDay:Start,EndDay:End,Keyword:this.filters.KeyWord,Pn:this.studentPn,Ps:this.studentPs};
                  axios.post('/api/School/MyStudent?id='+row.AccountID, obj).then((response)=>{
	              	 console.log( response.data.CurPager.ResultList)
	              	  this.tableData = response.data.CurPager.ResultList
	                 this.listLoading = false;
	              }).catch(function (error) {
	                console.log(error);
	              });
			},
			 openDetails (row,event,column) {
			 	console.log(row)
			 	if(column.type !== 'selection'){
                    this.isDetail = true;
			        //具体操作        
			       axios.get('/api/School/TeacherDetail',  {params:{  tid:row.AccountID,}
		              }).then((response)=>{
		              		console.log(response.data);
		                   this.teacherEditMsgForm.id = response.data.Data.Account.id
                          this.teacherEditMsgForm.sex = response.data.Data.Account.Sex
                          this.teacherEditMsgForm.birth = response.data.Data.Teacher.Birthday
                          this.teacherEditMsgForm.office = response.data.Data.Teacher.GraduateSchool
                          this.teacherEditMsgForm.name = response.data.Data.Account.RealName
                          this.teacherEditMsgForm.EducationBackground = response.data.Data.Teacher.EducationBackground
		              }).catch(function (error) {
		                console.log(error);
		              });
			 	}
			 	 
			   },
			  getHeight(){
		          this.conheight.height=window.innerHeight-250+'px';
		          this.conheightEdit.height=window.innerHeight-150+'px';
		       },
			//性别显示转换
			formatSex: function (row, column) {
				return row.Sex == "m" ? '男' : row.Sex == "f" ? '女' : '未知';
			},
			toDate: function (row, column) {
				return row.JoinTime.substr(0,19).replace('T',' ');
			},
			toCreateDate: function (row, column) {
				return row.CreateTime.substr(0,19).replace('T',' ');
			},
			toEndDate: function (row, column) {
				return row.EndDate.substr(0,19).replace('T',' ');
			},
			toSex: function (sex) {
				//return sex == "m" ? '男' : sex == "f" ? '女' : '未知';
			},
				//显示新增界面
			handleAdd: function () {
				this.addFormVisible = true;
				this.addForm = {
					loginName: '',
					password: '',
					ispassword: '',
					realName: '',
					Sex:'f'
				};
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
			},
			handleisPassword(){
				let value = this.addForm.password
				let value1 = this.addForm.ispassword
			     if(value != value1){
                    this.isPassWordDiff = true
			     }else{
			     	this.isPassWordDiff = false
			     }
			},
			addSubmit(){
				this.addLoading = true;
				if(this.isloginNameNone == false &&this.isPassWordNone == false &&this.isPasswordError == false &&this.isPassWordDiff == false &&this.isrealNameNone == false){
                 axios.post('/api/School/EditTeacher',  {
	                   id:0,
	                   LoginName:this.addForm.loginName,
	                   Password:this.addForm.password,
	                   Sex:this.addForm.Sex,
	                   RealName:this.addForm.realName
	              }).then((response)=>{
	              	    this.addLoading = false;
	              	 	this.addFormVisible = false;
	              	 	console.log(response.data.Msg);
	              	 	this.getUsers();
	              }).catch(function (error) {
	                console.log(error);
	              });
				}
			},
				//删除
			handleStudentDel: function (index, row) {
				this.$confirm('确认删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					 axios.get('/api/School/DelStudent',  {params:{  sid:row.AccountID,}
		              }).then((response)=>{
		              	// console.log( response.data)
		              	this.getUsers()
		              }).catch(function (error) {
		                console.log(error);
		              });
				}).catch(() => {

				});
			},
			//获取全部用户
			getAllUser(){
				this.filters.time = '';
                this.filters.KeyWord = '';
                this.getUsers();
			},
			//获取用户列表
			getUsers() {
				 this.listLoading = true;
				 let Start
                 let End
                 if(this.filters.time[0] == undefined){
                      Start = ''
                 }else{
                 	 Start =  new Date(this.filters.time[0]).format("yyyy-MM-dd hh:mm:ss")
                 }
                  if(this.filters.time[1] == undefined){
                      End = ''
                 }else{
                 	 End =  new Date(this.filters.time[1]).format("yyyy-MM-dd hh:mm:ss")
                 }
				let obj = {StartDay:Start,EndDay:End,Keyword:this.filters.KeyWord,CurPager:null};
	             axios.post('/api/School/Teacher?pn='+this.page+'&ps='+this.ps,obj).then((response)=>{
	              	// console.log( response.data)
	                 this.page = response.data.CurPager.CurPage
	                 this.PageSize = response.data.CurPager.PageSize
	                 this.total = response.data.CurPager.TotalPages
	                 this.tableData = response.data.CurPager.ResultList
	                 this.listLoading = false;
	              }).catch(function (error) {
	                console.log(error);
	              });
			},
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
						this.listLoading = true;
					 axios.get('/api/School/DelTeacher',  {params:{  tid:row.AccountID,}
		              }).then((response)=>{
		              	this.listLoading = false;
		              	// console.log( response.data)
		              	console.log(response.data.Msg)
		              	this.getUsers();
		              }).catch(function (error) {
		                console.log(error);
		              });
				}).catch(() => {

				});
				
			},
			//显示编辑界面
			handleEdit: function (index, row) {
                 this.isEdit = !this.isEdit;
                 if(this.isStudent == true){
                 	sessionStorage.setItem('returnMyStudent','true')
                 }//当前处于康复师管理下得我的患者
				 this.editForm = {
						id: row.AccountID,
						loginName: row.LoginName,
						realName:row.RealName,
						Sex: row.Sex,
						phone: '',
						email: '',
						qq: ''
			      }
			},
			editStudentSubmit: function () {
				 axios.post('/api/School/EditStudent',  {
				 	   id:this.editForm.id,
	                   LoginName:this.editForm.loginName,
	                   RealName:this.editForm.realName,
	                   Mobile:this.editForm.phone,
	                   Email:this.editForm.email,
	                   Sex:this.editForm.Sex,
	                   qq:this.editForm.qq,
	                   TsFlag:false,
	              }).then((response)=>{
	              	 //console.log( response.data)
	              	 this.getUsers();
	              	 this.isEdit = false;
	              }).catch(function (error) {
	                console.log(error);
	              });
			},
			//编辑
			editSubmit: function () {
				 this.editLoading = true
				 axios.post('/api/School/EditTeacher',  {
				 	   ID:this.editForm.id,
	                   LoginName:this.editForm.loginName,
	                   RealName:this.editForm.realName,
	                   Mobile:this.editForm.phone,
	                   Email:this.editForm.email,
	                   Sex:this.editForm.Sex,
	                    qq:this.editForm.qq,
	              }).then((response)=>{
	              	 this.editLoading = false
	              	// console.log( response.data)
	              	 this.isEdit = false
	              	 this.getUsers();
	              }).catch(function (error) {
	                console.log(error);
	              });
			},
			
			selsChange: function (sels) {
				this.sels = sels;
			},
			handleBack(){
				this.isEdit = false
				this.isDetail = false
				if(sessionStorage.getItem('returnMyStudent')){
                    sessionStorage.removeItem('returnMyStudent')
				}else{
					  this.getUsers()
					  this.isStudent = false
				}
			  
			}
		},
		mounted() {
			   // this.getUsers();
				//this.listLoading = true;
			  // axios.get('/api/School/GetTeacherList')
     //          .then((response)=>{
     //             this.total = response.data.length;
     //          })
     //          .catch(function (error) {
     //            console.log(error);
     //          });
            
		}
	}

</script>

<style>
.el-table__body, .el-table__header {
    width: auto!important;
    text-align: center;
}
.rightBox{
	height:40px;
	line-height:40px;
	border:1px solid #ccc;
	min-width:100px;
	border-radius:5px;
	padding:0 20px;
}
.errorBox{
	color:red;
}
div.cell{
	text-align:center;
}
.el-submenu__title {
	color:#fff
}
.titleBox{
	height:50px;
	line-height:50px;
}
.el-dialog__header {
    padding:15px 20px;
  
    background-color: #20a0ff;
}
.el-dialog__title{
	  color: #fff;
}
tr{
	cursor:pointer;
}
.btnSty,.delBtnSty{
	color:#50D285;
	border:none;
	font-weight:bold;
	background:rgba(0,0,0,0);
	margin-left:0px !important;
}
.btnSty{
	border-right:2px solid #f1f1f1;
	border-radius:0;
}
.btnSty:hover,.delBtnSty:hover{
		background:rgba(0,0,0,0)
}
.delBtnSty{
	color:#AFAFAF
}
</style>